<#assign base=request.contextPath />
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="${base}/img/asset-favicon.ico">
    <title>在线教育网</title>
    <link rel="stylesheet" href="${base}/plugins/normalize-css/normalize.css"/>
    <link rel="stylesheet" href="${base}/plugins/bootstrap/dist/css/bootstrap.css"/>
    <link rel="stylesheet" href="${base}/css/page-learing-personal.css"/>
    <link rel="stylesheet" href="${base}/css/loading.css"/>

    <style type="text/css">

        [v-cloak] {
            display: none;
        }
    </style>
</head>

<body>
<!-- 页面头部 -->
<!--头部导航-->
<#include 'header.ftl'>

<div class="personal-header" style="background-image: url(${base}/img/asset-banner.png);">
</div>
<!-- 页面 -->
<div class="container" id="app" v-cloak>
    <div class="personal-nav pull-left">
        <div class="nav nav-stacked text-left">
            <div class="title">个人中心</div>
            <div class="my-ico">
                <img alt="" src="${users.head}">
                <p>梦醒时分</p>
            </div>
            <div class="item">
                <li :class="{active:show=='myCourses'}">
                    <a @click="showDiv('myCourses')" href="javascript:void (0)" class="glyphicon glyphicon-tower">
                        我的课程
                        <i class="pull-right">></i>
                    </a>
                </li>

                <li :class="{active:show=='myNews'}">
                    <a @click="showDiv('myNews')" href="javascript:void (0)" class="glyphicon glyphicon-envelope">
                        我的消息
                        <i class="pull-right">></i>
                    </a>
                </li>

                <li :class="{active:show=='myCollections'}">
                    <a @click="showDiv('myCollections')" href="javascript:void (0)" class="glyphicon glyphicon-heart">
                        我的收藏
                        <i class="pull-right">></i>
                    </a>
                </li>
                <li :class="{active:show=='mySettings'}">
                    <a @click="showDiv('mySettings')" href="javascript:void (0)" class="glyphicon glyphicon-cog">
                        个人设置
                        <i class="pull-right">></i>
                    </a>
                </li>
                <li>
                    <a href="${base}/teacher/personal" target="_blank" class="glyphicon glyphicon-cog"
                       v-cloak v-if="isTeacher">
                        我的教学方
                        <i class="pull-right">></i>
                    </a>
                </li>
                <li>
                    <a @click="logout" href="javascript:void (0)" class="glyphicon glyphicon-log-out">
                        退出
                        <i class="pull-right">></i>
                    </a>
                </li>
            </div>
        </div>
    </div>
    <div class="personal-content pull-right" v-show="show=='myCourses'">
        <div class="personal-cont">
            <div class="top">
                <div class="tit"><span>最近学习课程</span></div>
                <div class="top-cont">
                    <div class="col-lg-8">
                        <div class="imgIco">
                            <img src="${base}/img/asset-timg.png" width="60" height="28" alt="">
                        </div>
                        <div class="title">
                            <span class="lab">继续学习</span>{{latelyCourse.course.name}}
                            <span class="status">学习中</span>
                        </div>
                        <div class="about">
                            <span class="lab">正在学习</span> {{latelyCourse.chapter.title}}
                            <span class="data"></span>
                        </div>
                    </div>
                    <div class="division"></div>
                    <div class="col-lg-4 text-right">
                        <a :href="'${base}/chapter/video/'+latelyCourse.course.id+'/'+latelyCourse.chapter.id"
                           class="goLear" target="_blank"> 继续学习</a>
                        <a href="#" class="evalu"> 课程评价</a>
                        <div class="aft" style="top:0px;right:0px;">● ● ●
                            <ul></ul>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
            </div>
            <div class="my-course">
                <div class="title">
                    <div class="lab-title">全部课表</div>
                    <div class="tit-Item">
                        <span>
                            <em :class="{active:orderBy=='last_time desc'}" @click="setOrderBy('last_time desc')"
                                style="cursor: pointer">按学习时间进行排序
                            </em>
                            <em :class="{active:orderBy=='create_time desc'}" @click="setOrderBy('create_time desc')"
                                style="cursor: pointer">按加入时间进行排序
                            </em>
                        </span>
                        <span>
                            <em class="active" style="cursor: pointer">全部</em>
                            <em style="cursor: pointer">初级</em>
                            <em style="cursor: pointer">中级</em>
                            <em style="cursor: pointer">高级</em>
                        </span>
                    </div>
                </div>
                <div class="cont">
                    <div class="col-lg-6" v-for="(course,index) in courses"
                         :key="course.id">
                        <div class="item">
                            <div class="imgIco">
                                <img src="${base}/img/asset-timg.png" width="60" height="28" alt="">
                            </div>
                            <div class="title">
                                <span class="lab">继续学习</span>
                                {{course.course.name}}
                                <span class="status">
                                    <template v-if="course.course.level==1">初级</template>
                                    <template v-if="course.course.level==2">中级</template>
                                    <template v-if="course.course.level==3">高级</template>
                                </span>
                                <div class="aft">● ● ●
                                    <ul></ul>
                                </div>
                            </div>
                            <div class="about"><span class="lab">正在学习</span>{{course.chapter.title}}</div>
                            <div class="time">最后学习日期: {{timestampToTime(course.lastTime)}}</div>
                            <div class="parting"></div>
                            <div class="butItem text-center">
                                <a :href="'${base}/chapter/video/'+course.course.id+'/'+course.chapter.id"
                                   target="_blank" class="golearing">继续学习</a>
                                <a href="#" class="classcom">课程评价</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="personal-content pull-right" v-show="show=='myNews'">
        <div class="personal-cont">
            我的消息
        </div>
    </div>
    <div class="personal-content pull-right" v-show="show=='myCollections'">
        <div class="personal-cont">
            <div class="my-course">
                <div class="title">
                    <div class="lab-title">我的收藏</div>
                    <div class="tit-Item">
                        <span>
                            <em :class="{active:orderBy=='last_time desc'}" @click="setOrderBy('last_time desc')"
                                style="cursor: pointer">按学习时间进行排序
                            </em>
                            <em :class="{active:orderBy=='create_time desc'}" @click="setOrderBy('create_time desc')"
                                style="cursor: pointer">按加入时间进行排序
                            </em>
                        </span>
                        <span>
                            <em class="active" style="cursor: pointer">全部</em>
                            <em style="cursor: pointer">初级</em>
                            <em style="cursor: pointer">中级</em>
                            <em style="cursor: pointer">高级</em>
                        </span>
                    </div>
                </div>
                <div class="cont">
                    <div class="col-lg-6" v-for="(course,index) in courses"
                         :key="course.id">
                        <div class="item">
                            <div class="imgIco"><img src="${base}/img/asset-timg.png" width="60" height="28" alt="">
                            </div>
                            <div class="title"><span class="lab">继续学习</span> {{course.course.name}}
                                <span class="status">
                                    <template v-if="course.course.level==1">初级</template>
                                    <template v-if="course.course.level==2">中级</template>
                                    <template v-if="course.course.level==3">高级</template>
                                </span>
                                <div class="aft">● ● ●
                                    <ul></ul>
                                </div>
                            </div>
                            <div class="about"><span class="lab">正在学习</span>{{course.chapter.title}}</div>
                            <div class="time">最后学习日期: {{timestampToTime(course.lastTime)}}</div>
                            <div class="parting"></div>
                            <div class="butItem text-center"><a href="#" class="golearing">继续学习</a>
                                <a href="#" class="classcom">课程评价</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="personal-content pull-right" v-show="show=='mySettings'">
        <form>
            修改个人设置
            <div class="personal-cont row" style="padding: 15px;">
                <div class="col-sm-8">
                    <div class="form-group">
                        <label>
                            个人简介
                            <textarea class="form-control" rows="3" style="width: 590px;resize: none;"
                                      placeholder="介绍一下你自己">${users.introduction}</textarea>
                        </label>
                    </div>
                    <div class="form-group">
                        <label for="nickname">昵称</label>
                        <input type="text" class="form-control" id="nickname" name="nickname" value="${users.nickname}">
                    </div>
                    <div class="form-group">
                        <label for="mobile">手机号</label>
                        <input type="text" class="form-control" id="mobile" name="mobile" value="${users.mobile}">
                    </div>
                    <div class="form-group">
                        性别：
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="gender1" value="1"> 男
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="gender2" value="2"> 女
                        </label>
                        <label class="radio-inline">
                            <input type="radio" name="gender" id="gender3" value="3"> 保密
                        </label>
                    </div>
                    <button type="button" class="btn btn-primary">修改密码</button>
                    <button type="button" class="btn btn-default">保存</button>
                </div>
                <div class="col-sm-3">
                    头像设置
                    <div class="form-group">
                        <label for="exampleInputFile">File input</label>
                        <input type="file" id="exampleInputFile" name="head">
                        <p class="help-block"></p>
                    </div>
                </div>
            </div>
            <form>
    </div>
    <div class="personal-content pull-right" v-show="show=='password'">
        <div class="personal-cont">
            修改密码
        </div>
    </div>
</div>


<!-- 页面 css js -->
<script src="${base}/js/vuejs-2.5.16.js"></script>
<script src="${base}/js/axios-0.18.0.js"></script>
<script id="testScript" src="${base}/js/personal.js" userId="${users.id}" base="${base}"></script>


</body>